<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../../yl/index.css" />
    <title>收银管理</title>
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }


        input[type="search"] {
            background-image: url('../../../admin/images/Search.png');
            background-position: right center;
            background-repeat: no-repeat;
            padding-right: 20px;
            background-size: 20px;
        }

        .product-list {
            text-align: center;
        }

        .product-item {
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-bottom: 1px solid #f7f7f7;
        }

        .head {
            width: 90%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            margin: auto;
        }

        .el-card__body,
        .el-main {
            padding: 0;
            height: 100%;
        }

        .el-card {
            background-color: white;
        }

        .goods {
            display: flex;
            justify-content: space-between;
            line-height: 50px;
            border-bottom: 1px solid #f7f7f7;
        }

        .el-button.is-round {
            width: 80%;
            margin: auto;
            margin-left: 10%;
        }

        .calculator {
            padding: 10px;
        }

        .display {
            background-color: #f6f6f6;
            padding: 10px;
            border-radius: 5px;
            text-align: right;
            font-size: 1.5em;
            margin-bottom: 40px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            height: 107px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        .keyboard {
            display: grid;
            grid-gap: 5px;
        }

        .row {
            display: flex;
            justify-content: space-around;
        }

        .btn {
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 78px;
            height: 50px;
        }

        .btn-primary {
            background-color: #007bff;
            color: #fff;
        }

        .btn-danger {
            background-color: #dc3545;
            color: #fff;
        }

        .btn-primary:hover,
        .btn-danger:hover {
            filter: brightness(90%);
        }

        .products-container {
            height: 85%;
            width: 98%;
            position: relative;
            z-index: 999;
        }

        .products-card {
            height: 85%;
            width: 96vw;
        }

        .header {
            display: flex;
            justify-content: space-between;
        }

        .clear-button {
            cursor: pointer;
        }

        .order-card {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ebeef5;
            flex: 0 0 33%;
            max-width: 30%;
            margin: 4px;
        }

        .order-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            height: 10%;
        }

        .countdown {
            margin-left: 10px;
        }

        .remove-button {
            cursor: pointer;
        }

        .item-info {
            margin-bottom: 5px;
        }

        .item {
            display: flex;
            justify-content: space-around;
        }

        .item-name {
            flex: 1;
        }

        .item-quantity {
            margin-left: 10px;
        }

        .item-price {
            margin-left: 10px;
        }

        .order-total {
            height: 10%;
        }

        .total-price {
            background-color: #409EFF;
            color: #FFFFFF;
            border: none;
            padding: 8px 16px;
            margin-top: 10px;
            border-radius: 18px;
            transition: background-color 0.3s;
            display: block;
            margin: 0 auto;
            width: 80%;
        }

        .total-price:hover {
            background-color: #66B1FF;
        }

        .mask {
            height: 100%;
            width: 100%;
            background-color: #000000b4;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
        }

        .popup {
            position: fixed;
            z-index: 9999;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30%;
            height: 57%;
            background-color: white;
        }

        .popup-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            width: 90%;
            margin: auto;
        }

        #qrcode {
            position: fixed;
            z-index: 9999;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* background-color: white; */
        }

        .qrcode {
            background-color: white;
            width: 30%;
            height: 35%;
        }

        .pay-but {
            background-color: #409EFF;
            color: #FFFFFF;
            border: none;
            padding: 8px 16px;
            margin-top: 10px;
            border-radius: 18px;
            transition: background-color 0.3s;
            display: block;
            margin: 0 auto;
            width: 80%;
            margin-bottom: 10%;
        }

        .el-table::before {
            left: 0;
            bottom: 0;
            width: 95%;
            height: 1px;
        }

        .el-table__empty-text {
            line-height: 60px;
            width: 50%;
            color: #909399;
            margin-right: 10%;
        }

        .pay-item {
            width: 25%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-right: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }

        .pay-item:last-child {
            border-right: none;
        }

        .el-table__header {
            height: 0px;
        }

        .el-table::before {
            background-color: white;
        }

        .el-checkbox__label {
            padding: 0;
            /* 移除内边距 */
        }

        .custom-select {
            position: relative;
            width: 200px;
            height: 40px;
            overflow: hidden;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .custom-select select {
            width: 100%;
            height: 100%;
            padding: 8px;
            font-size: 16px;
            /* 自定义字体大小 */
            border: none;
            outline: none;
            background-color: transparent;
            appearance: none;
            /* 隐藏默认样式 */
            cursor: pointer;
        }

        .custom-arrow {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #333;
            pointer-events: none;
        }

        .selected {
            background-color: #ccc;
            /* 设置选中状态的背景颜色 */
        }

        .borderless-input .el-input__wrapper {
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
        }

        /* 移除聚焦状态样式 */
        .borderless-input .el-input__wrapper.is-focus {
            box-shadow: none !important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <!-- 商品输入列表 -->
        <div style="display: flex; height:98vh;">
            <div style="margin: 10px;display: flex; width: 100%;">
                <el-card style="width: 100%;display: flex; flex-direction: column; height: 100%;">
                    <div
                        style="height: 50px; display: flex;justify-content: space-around;align-items: center;border-bottom: 1px solid #f7f7f7; background-color: white; z-index: 1;">
                        <div style="margin-left: 10px; width: 200px; flex-shrink: 0;">
                            <el-select @change="Query" v-model="form.Article_Exchange_SerialNumber" placeholder="请选择兑换点">
                                <el-option v-for="item in address" :key="item.Article_Exchange_SerialNumber"
                                    :label="item.Article_Exchange_Name"
                                    :value="item.Article_Exchange_SerialNumber"></el-option>
                            </el-select>
                        </div>
                        <div style="margin: 0 10px; width: 100%;">
                            <el-input @input="Query" placeholder="筛选商品信息" prefix-icon="Search"
                                v-model="form.Article_Name"></el-input>
                        </div>
                    </div>
                    <!-- 商品列表 -->
                    <div style="height: calc(100% - 50px); display: flex; ">
                        <div style="display: flex; flex-direction: column; width: 100%;padding: 10px;">
                            <el-table :data="tableData" style="width: 100%;" height="100%"
                                @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="40"></el-table-column>
                                <el-table-column prop="Article_Name" align="center" label="商品名称"></el-table-column>
                                <el-table-column width="140" align="center" label="商品图片">
                                    <template v-slot="{row}">
                                        <el-image style="width: 100px; height: 100px" :src="photo + row.Picture_URL"
                                            fit="contain"></el-image>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="Brand_Name" align="center" label="品牌"></el-table-column>
                                <el-table-column prop="Category_Name" align="center" label="类型"></el-table-column>
                                <el-table-column prop="Specifications_Name" align="center" label="规格"></el-table-column>
                                <el-table-column prop="Villager_Point" align="center"
                                    label="兑换所需村民积分"></el-table-column>
                                <el-table-column prop="Party_Point" align="center" label="兑换所需党员积分"></el-table-column>
                                <el-table-column prop="Inventory_Quantity" align="center"
                                    label="剩余库存"></el-table-column>
                                <el-table-column label="操作" fixed="right" align="center" width="200">
                                    <template v-slot="{row}">
                                        <el-input-number v-model="row.Quantity" :step="1" :min="1"
                                            :max="Number(row.Inventory_Quantity)"></el-input-number>
                                        <el-switch :disabled="row.disabled" v-model="row.Points_Type" active-value="1"
                                            inactive-value="0" active-text="党员积分" inactive-text="村民积分"></el-switch>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination style="margin: 10px" background @size-change="handleSizeChange"
                                @current-change="handleCurrentChange" :current-page="form.PaginationNumber"
                                :page-sizes="[10, 20, 30, 50]" :page-size="form.RowAmount"
                                layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
                        </div>
                    </div>
                </el-card>
                <el-card style="flex-shrink: 0; margin-left: 10px;width: 500px;overflow: auto; position: relative;">
                    <div style="padding-bottom: 60px; position: relative;">
                        <!-- 会员登录、挂单-->
                        <div style="background-color: #686b75;width: 100%;">
                            <div class="head">
                                <div style="width: 20%;">
                                    <img src="../../../admin/images/ewm.png" alt="" style="width: 40px;height: 40px;">
                                </div>
                                <div style="width: 55%;">
                                    <el-input @input="InputPersonal" placeholder="请输入身份证号" prefix-icon="Search"
                                        v-model="searchQuery"></el-input>
                                </div>
                                <div style="width: 20%;text-align: center;">
                                    <!-- <div>挂单</div> -->
                                </div>
                            </div>
                        </div>
                        <!-- 商品、应付、优惠 -->
                        <div style="padding: 20px;">
                            <div class="goods">
                                <div>商品</div>
                                <div>{{selectArticle.Quantity}}件</div>
                            </div>
                            <div class="goods">
                                <div>应使用村民积分</div>
                                <div>{{selectArticle.Villager_Point}}</div>
                            </div>
                            <div class="goods">
                                <div>应使用党员积分</div>
                                <div>{{selectArticle.Party_Point}}</div>
                            </div>
                        </div>
                        <!-- 会员 -->
                        <div style="margin: 10px;border: 1px dashed;border-radius: 10px;">
                            <div style="display: flex;flex-direction: column; padding: 10px;">
                                <div>
                                    <span>姓名：{{account.Personal_Name?account.Personal_Name:''}}</span>
                                    <span v-if="!account.Personal_Name" style="color: red;">
                                        {{searchQuery?'未查询到该账户':''}}
                                    </span>
                                </div>
                                <div style="margin: 10px 0; display: flex;justify-content: space-between;">
                                    <span>
                                        村民积分：{{account.Villager_Remain_Points?account.Villager_Remain_Points:'0'}}
                                    </span>
                                    <span v-if="selectArticle.Villager_Point > account.Villager_Remain_Points"
                                        style="color: red;">
                                        积分不足
                                    </span>
                                </div>
                                <div style="display: flex;justify-content: space-between;">
                                    <span>
                                        党员积分：{{account.Party_Remain_Points?account.Party_Remain_Points:'0'}}
                                    </span>
                                    <span v-if="selectArticle.Party_Point > account.Party_Remain_Points"
                                        style="color: red;">
                                        积分不足
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div style="padding: 20px;">
                            <div class="goods">
                                <div>剩余村民积分</div>
                                <div :style="{color:isNaN(remainPoints.New_Villager_Remain_Points)?'red':''}">
                                    {{remainPoints.New_Villager_Remain_Points}}
                                </div>
                            </div>
                            <div class="goods">
                                <div>剩余党员积分</div>
                                <div :style="{color:isNaN(remainPoints.New_Party_Remain_Points)?'red':''}">
                                    {{remainPoints.New_Party_Remain_Points}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 结算 -->
                    <div style="position: absolute; bottom: 0; width: 100%; z-index: 999;height: 10%;">
                        <el-button type="primary" round width="250" @click="showSalesOrder"
                            style="bottom: 15%;position: absolute;">立即结算</el-button>
                    </div>
                </el-card>
            </div>
        </div>
        <el-dialog v-model="showDialog" width="700" class="custom-dialog">
            <template #header>
                <div class="dialog-header">
                    <span>结算</span>
                </div>
            </template>
            <el-descriptions :column="2" size="large" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">村民积分</div>
                    </template>
                    <el-input disabled :value="account.Villager_Remain_Points + '积分'" class="borderless-input"
                        placeholder="" />
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">党员积分</div>
                    </template>
                    <el-input disabled :value="account.Party_Remain_Points + '积分'" class="borderless-input"
                        placeholder="" />
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">本次使用<br />村民积分</div>
                    </template>
                    <el-input disabled :value="selectArticle.Villager_Point + '积分'" class="borderless-input"
                        placeholder="" />
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">本次使用<br />党员积分</div>
                    </template>
                    <el-input disabled :value="selectArticle.Party_Point + '积分'" class="borderless-input"
                        placeholder="" />
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">兑换后剩余<br />村民积分</div>
                    </template>
                    <el-input disabled :value="remainPoints.New_Villager_Remain_Points + '积分'" class="borderless-input"
                        placeholder="" />
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">兑换后剩余<br />党员积分</div>
                    </template>
                    <el-input disabled :value="remainPoints.New_Party_Remain_Points + '积分'" class="borderless-input"
                        placeholder="" />
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
                    <el-button type="primary" :loading="loading" @click="handleSubmit"
                        class="confirm-btn">提交</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="../../../yl/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="js/index.js"></script>
</body>

</html>